<!--left side-->
<br>
<br>
<div class="col-md-6">
    <div class="panel">
        <div class="panel-heading">
            <h3 class="panel-title">实时数据量图表显示</h3>
            <div class="right">
                <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
                <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
            </div>
        </div>

        <div class="panel-body">
            <div id="RainRuleChart" class="ct-chart" style="height: 80%;width: 100%;" ></div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        var interruptStatus = 1;
        //start
        $("#start_data_51job").click(function(){
            $("#start_data_51job").attr("disabled", true);
            $("#interrupt_data_51job").attr("disabled", false);
            $("#cease_data_51job").attr("disabled", false);
            //alert("start");
{#            $("#hidden_target_name").val("51job");#}
{#            alert("start");#}
{#            alert($("#hidden_target_name").val());#}
{#            $("#FromGainRule-51job").submit();#}
            $.get("/zfq/admin/gainRule/reRule-data/?key=51job&operate=start",function (data) {
                if (data != null){
                    alert("网络异常");
                    $("#FromGainRule-51job").submit();
                }
            })
        });
        //cease
        $("#cease_data_51job").click(function(){
            $("#start_data_51job").attr("disabled", false);
            //alert("cease");
            $.get("/zfq/admin/gainRule/reRule-data/?key=51job&operate=cease",function () {});
        });
        //interrupt
        $("#interrupt_data_51job").click(function(){
            if (interruptStatus == 1) {
                $("#interrupt_data_51job").text("继续爬取");
                $("#interrupt_data_51job").attr("class", "btn btn-success");
            }else if(interruptStatus == -1) {
                $("#interrupt_data_51job").text("中断爬取");
                $("#interrupt_data_51job").attr("class", "btn btn-warning");
            }
            interruptStatus = -interruptStatus;
            //alert("interrupt");
            $.get("/zfq/admin/gainRule/reRule-data/?key=51job&operate=interrupt&status="+ interruptStatus,function () {});
        });
        //refresh
	    $("#start_data_51job").click(function(){
	        var gi = 1;
	        var gj = 1;
            //alert("refresh");
            setInterval(function () {
                $.get("/zfq/admin/gainRule/reRule-data/?key=51job&operate=refresh",function (data) {
                    var data_original =  JSON.parse(data);
                    $('td').remove();
                    data = data_original;
                    if (gi == 1){
                        data_t = data_original[0];
                        if(data != null)
                             $("#job51_thead").append(
                                "<th>" +"Job_Title" + "</th>"+
                                "<th>" +"Job_Type" + "</th>"+
                                "<th>" +"Job_Place" + "</th>"+
                                "<th>" +"Job_Duties" + "</th>"+
                                "<th>" +"Job_Pay" + "</th>"+
                                "<th>" +"Company_Name" + "</th>"+
                                "<th>" +"Num_People" + "</th>"+
                                "<th>" +"Work_Experience" + "</th>"+
                                "<th>" +"Job_Boon" + "</th>"+
                                "<th>" +"Company_Type" + "</th>");
                        gi+=1;
                    }

                    for (key in data){
                    repeatition = "</div></td><td><div class=\"wrap\" title=\""+ data[key]['Job_Title'] + "\">";
                    hm = "<tr><td><div class=\"wrap\" title=\""+ gj + "\">"+
                            data[key]['Num'] + repeatition +
                            data[key]['Job_Title'].toString().substr(0,10) + repeatition +
                            data[key]['Job_Type'].toString() + repeatition +
                            data[key]['Job_Place'].toString().substr(0,5) + repeatition +
    {#                      data[key][3].toString().substr(0,10) + repeatition +#}
                            data[key]['Job_Duties'].toString().substr(0,10)+"..." + repeatition +
                            data[key]['Job_Pay'].toString() +repeatition +
                            data[key]['Company_Name'].toString().substring(0,10) + repeatition +
                            data[key]['Num_People'].toString().substring(0,5)+ repeatition +
                            data[key]['Work_Experience'].toString() + repeatition +
                            data[key]['Job_Boon'].toString().replace('$','-').substr(0,10) + repeatition +
                            data[key]['Company_Type']  +"</div></td></tr>";
                            gj++;
                    $("#job51_tbody").prepend(hm);
                    }
                });
            }, 1000);
	    });
    });
</script>
<div class="row">
    <div class="col-md-12">
            <!-- TABLE STRIPED -->
        <div class="panel">
            <div class="panel-heading">
                <h2 class="panel-title">数据信息显示表</h2>
                <div class="right">
                    <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
                    <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
                </div>
            </div>
            <div class="panel-body">
                <table class="table table-striped" >
                    <thead>
                        <tr id="job51_thead">
                            <th><button type="button" class="btn btn-primary" id="refresh_data_51job"><i class="fa fa-spinner fa-spin"></i> 刷新信息...</button></th>
                        </tr>
                    </thead>
                    <tbody id="job51_tbody">
                    </tbody>
                </table>
            </div>
        </div>
        <!-- END TABLE STRIPED -->
    </div>
</div>